<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">类型</label>
            <div class="col-sm-10 typeRadio">
              	<label class="radio-inline">
				<input type="radio" name="typeId" value="1" checked> 菜单 </label>
				<label class="radio-inline">
				<input type="radio" name="typeId" value="2"> 按钮 </label>
            </div>
          </div>
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
            <div class="col-sm-10">
              <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
            </div>
          </div>
          <div class="form-group">
            <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="urlId" placeholder="url">
            </div>
          </div>
          <div class="form-group">
			<label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
			<div class="col-sm-10">
				<input type="text" id="permissionId"
				       placeholder="多个用逗号分隔，如：user:list,user:create"
					   class="form-control">
			</div>
		  </div>
		  <div class="form-group">
				<label for="sortId" class="col-sm-2 control-label">排序号：</label>
				<div class="col-sm-10">
					<input type="text" id="sortId" placeholder="排序号"
						class="form-control">
				</div>
		 </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">取消</button>
          <button type="button" class="btn btn-info pull-right btn-save">保存</button>
        </div>
        <!-- /.box-footer -->
      </form>
      <!-- zTree 对应的div -->
      <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
		<div class="layui-layer-title" style="cursor: move;">选择菜单</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a>
			<a class="layui-layer-btn1 btn-cancel">取消</a>
	     </div>
      </div>
  </div>
  <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
  <script type="text/javascript" src="bower_components/layer/layer.js">
  </script>
  <script type="text/javascript">
      //将zTree插件的代码
      var zTree; //zTree是第三方扩展的一个Jquery插件
      //初始化zTree时会用到
      var setting = {
          data : {
              simpleData : {
                  enable : true,
                  idKey : "id",  //节点数据中保存唯一标识的属性名称
                  pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                  rootPId : null  //根节点id
              }
          }
      }
      $(function () {
            // 为上级菜单的输入框添加点击事件
          $("#parentId").click(loadZtreeNodes);
          $('#menuLayer').on('click','.btn-cancel',doHideZtree)
                         .on('click','.btn-confirm',doGetSelectNodes);
          $('.box-footer').on('click','.btn-cancel',doCancel)
                          .on('click','.btn-save',doSaveOrUpdate);
          //获取要修改的菜单ID
          var menuId=$("#mainContentId").data("menuId");
          if(menuId){
              //获取到menuId的值,需要向后端发起请求
              var url="/sys-menus/findMenuById";
              var params={"id":menuId};
              $.post(url,params,function (result) {
                    if(result.state==2000){//成功获取修改数据
                        //回填数据
                       // console.log(result.data)
                        initFormData(result.data);
                    }else{
                        alert(result.message);
                    }
              })
          }

      });
      function initFormData(menu) {
          $('input[value='+menu.type+']').prop("checked",true);
          $('#nameId').val(menu.name);
          $('#parentId').val(menu.parentName);
          //绑定parentId的值
          $('#parentId').data("parentId",menu.parentId);
          $('#urlId').val(menu.url);
          $('#permissionId').val(menu.permission);
          $('#sortId').val(menu.sort);
      }

      //保存数据 添加菜单
      function doSaveOrUpdate() {
        // 获取表单数据
          var params=doGetFormData();
        //  console.log(params);
          var menuId=$('#mainContentId').data("menuId");
          var url="/sys-menus/saveMenu";
          if(menuId){
              url="/sys-menus/modifySysMenuById";
              params.id=menuId;
          }
         // 提交数据
          $.post(url,params,function (result) {
            if(result.state==2000){
                alert("操作成功!");
                //返回菜单列表
                doCancel();
            }else{
                alert(result.message);
            }
          })

      }
      
      function doGetFormData() {
          var params={
              "type": $("input[name='typeId']:checked").val(),
              "name": $('#nameId').val(),
              "parentId": $("#parentId").data("parentId"),
              "url": $("#urlId").val(),
              "permission":$("#permissionId").val(),
              "sort": $("#sortId").val(),
          }
            return params;
      }

      //取消按钮,返回菜单列表页面
      function doCancel() {
          //如果当前操作时修改成功,此时应该解绑menuId
          var menuId=$('#mainContentId').data("menuId");
          if(menuId){
              $('#mainContentId').data("menuId",'');
          }
          var url="/sys/menuList";
          $('#mainContentId').load(url);
      }

      //隐藏zTree所在的div
      function doHideZtree() {
        $('#menuLayer').css('display','none');
      }

      function doGetSelectNodes() {
          //获取zTree上选中的节点
          var nodes=zTree.getSelectedNodes();
          //判断是否选中节点
          if(!nodes || nodes.length==0){
              doHideZtree();
              return ;
          }else{
              //获取选中节点的名称和id 填充到文本框
              $('#parentId').val(nodes[0].name);
              //文本框绑定数据
              $('#parentId').data("parentId",nodes[0].id);
             // alert($('#parentId').data("parentId"));
              doHideZtree();
          }


      }


        //加载菜单节点树状结构  /sys-menus/findMenuNodes
     function loadZtreeNodes() {
          var url="/sys-menus/findMenuNodes";
          $.get(url,function (result) {
            if(result.state==2000){
                //初始化zTree
                zTree=$.fn.zTree.init(
                    $("#menuTree"),
                    setting,
                    result.data);
                $("#menuLayer").css("display","block");
            }else{
                alert(result.message);
            }
          });

     }



	</script>
    
    
    
    
    
    
    
    
    